<!-- 备件管理-备件基础数据页面-品牌 -->
<template>
  <div>
    <px-row gutter="16">
      <px-col :span="15" class="col left">
        <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" style="padding-top: 14px" label-width="120px">
          <px-row :gutter="16">
            <px-col :span="8"
              ><px-form-item label="品牌名称">
                <px-input
                  v-model="queryParams.brandName"
                  placeholder="请输入品牌名称"
                  maxlength="50"
                  clearable
                  @blur="queryParams.brandName = $event.target.value.trim()"
                  @keyup.enter="queryTable"
                >
                  <template #suffix>
                    <px-icon style="cursor: pointer" @click="queryTable">
                      <search />
                    </px-icon>
                  </template>
                </px-input>
              </px-form-item>
            </px-col>
            <px-col :span="16">
              <px-button type="primary" @click="queryTable">查询</px-button>
              <px-button @click="resetTable">重置</px-button>
            </px-col>
          </px-row>
        </px-form>
        <div class="equip-table-btn">
          <px-button v-has="'ALL_EQUIP_SPAREPARTS_BASEDATA_ADD'" style="margin-right: 8px" type="primary" @click="addSpareParts">新增品牌</px-button>
        </div>
        <px-table
          :data="tableData"
          class="equip-table"
          size="small"
          height="calc(100vh - 343px)"
          highlight-current-row
          border
          @current-change="handleCurrentChange"
        >
          <px-table-column label="序号" width="80" align="center" fixed="left">
            <template #default="{ $index }">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
            </template>
          </px-table-column>
          <px-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </px-table-column>
          <px-table-column fixed="right" label="操作" width="100" align="center">
            <template #default="scope">
              <px-tooltip content="编辑" placement="top">
                <px-button v-has="'ALL_EQUIP_SPAREPARTS_BASEDATA_EDIT'" link type="primary" icon="EditPen" @click.stop="handleEdit(scope.row)" />
              </px-tooltip>
              <px-tooltip content="删除" placement="top">
                <px-button v-has="'ALL_EQUIP_SPAREPARTS_BASEDATA_DELETE'" link type="danger" icon="Delete" @click.stop="handleDelete(scope.row)" />
              </px-tooltip>
            </template>
          </px-table-column>
        </px-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          class="equip-table-pagination"
          :total="total"
          @pagination="queryTable"
      /></px-col>
      <px-col :span="9" class="col">
        <div class="custom-form-title">关联类型</div>
        <div v-if="currentRow">
          <div class="equip-table-btn flex-center-between">
            <px-button v-has="'ALL_EQUIP_SPAREPARTS_BASEDATA_ADD'" style="margin-right: 8px" type="primary" @click="typeToBrandVisible = true"
              >新增关联</px-button
            >
            <px-tooltip :content="currentRow?.name" placement="top">
              <px-text truncated class="brandName">{{ currentRow?.name }}</px-text>
            </px-tooltip>
          </div>
          <px-table :data="typeTableData" class="equip-table" size="small" height="calc(100vh - 343px)" border>
            <px-table-column type="index" label="序号" width="80" align="center" fixed="left" />
            <px-table-column
              v-for="(item, index) in typeTableColumns"
              :key="index"
              :label="item.label"
              :min-width="item.minWidth"
              :show-overflow-tooltip="item.showOverflowTooltip"
            >
              <template #default="scope">{{
                scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
              }}</template>
            </px-table-column>
            <px-table-column fixed="right" label="操作" width="120" align="center">
              <template #default="scope">
                <px-tooltip content="移除" placement="top">
                  <px-button v-has="'ALL_EQUIP_SPAREPARTS_BASEDATA_DELETE'" link type="danger" icon="Delete" @click.stop="removeType(scope.row)" />
                </px-tooltip>
              </template>
            </px-table-column>
          </px-table>
        </div>
        <div v-else class="placeholder">请先选择左侧品牌</div>
      </px-col>
    </px-row>
    <!-- 新增编辑品牌 -->
    <AddBrand :visible="sparePartsVisible" :drawerType="drawerType" :detailData="sparePartsRow" @queryTable="queryTable" @closeDrawer="closeDrawer" />
    <!-- 关联类型 -->
    <AddTypeToBrand :visible="typeToBrandVisible" :detailData="currentRow" @closeDrawer="typeToBrandVisible = false" @queryTable="queryTypeTable" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_SPAREPARTS_BASEDATA"
});
import { queryListPage_6, delSparePartBrand, delSparePartBrandType, queryListByBrandCode } from "@/api/equip/spareParts";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, toRefs } from "vue";
import AddBrand from "./AddBrand.vue";
import AddTypeToBrand from "./AddTypeToBrand.vue";
// import BatchUpload from "@/components/Upload/BatchUpload.vue";
// import AddSparePartsDrawer from "./AddSparePartsDrawer.vue";
// import ViewSparePartsDialog from "./ViewSparePartsDialog.vue";

// const { proxy }: any = getCurrentInstance();
const state = reactive<any>({
  queryParams: {
    typeOrCode: "",
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "name", label: "品牌名称", minWidth: "240", showOverflowTooltip: { maxWidth: 100, visible: true } },
    { prop: "createName", label: "创建人", minWidth: "120", showOverflowTooltip: true },
    { prop: "createTime", label: "创建时间", minWidth: "120", showOverflowTooltip: true }
  ],
  typeTableColumns: [
    { prop: "name", label: "类型名称", minWidth: "160", showOverflowTooltip: true },
    { prop: "categoryDesc", label: "种类", minWidth: "80", showOverflowTooltip: true }
  ],
  tableData: [],
  typeTableData: [],
  total: 0,
  sparePartsVisible: false,
  typeToBrandVisible: false,
  drawerType: "add",
  sparePartsRow: {},
  currentRow: null
});
const {
  queryParams,
  tableColumns,
  typeTableColumns,
  tableData,
  typeTableData,
  total,
  sparePartsVisible,
  drawerType,
  sparePartsRow,
  currentRow,
  typeToBrandVisible
} = toRefs(state);

// 进入页面时触发
onMounted(() => queryTable());
// 当前选中行
const handleCurrentChange = async row => {
  currentRow.value = row;
  queryTypeTable();
};
const props = defineProps(["activeName"]);
// 查询备件列表
const queryTable = async () => {
  const params = { ...queryParams.value, type: props.activeName };
  const data = await queryListPage_6(params);
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 查询品牌关联类型
const queryTypeTable = async () => {
  if (currentRow.value) {
    typeTableData.value = await queryListByBrandCode(currentRow.value.code);
  } else {
    typeTableData.value = [];
  }
};
// 添加备件-显示抽屉
const addSpareParts = () => {
  drawerType.value = "add";
  sparePartsVisible.value = true;
  const sort = tableData.value.length ? tableData.value.length : 0;
  sparePartsRow.value = { sort };
};
// 编辑备件-显示抽屉
const handleEdit = (row: any) => {
  drawerType.value = "edit";
  sparePartsRow.value = row;
  sparePartsVisible.value = true;
};
// 添加/编辑备件-关闭抽屉
const closeDrawer = () => {
  sparePartsVisible.value = false;
};
// 删除备件
const handleDelete = async (row: any) => {
  // 1、不存在未解除的关联数据
  PxMessageBox.confirm(`是否删除该品牌“${row.name}”`, "删除提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await delSparePartBrand(row.id);
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
// 移除关联关系
const removeType = row => {
  PxMessageBox.confirm(`是否删除该关联类型“${row.name}”`, "删除提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await delSparePartBrandType({ typeCode: row.code, brandCode: currentRow.value.code });
      PxMessage.success("删除成功");
      queryTypeTable();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.col {
  position: relative;
}

.left {
  border-right: 1px solid #dfdfdf;
}

.equip-wrap-common .equip-table-pagination {
  bottom: auto;
}

.brandName {
  margin-left: 20px;
  font-size: 16px;
  font-weight: bold;
}

.custom-form-title {
  margin-top: 14px;
  font-size: 22px;
  font-weight: bold;
  line-height: 50px;
}

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.placeholder {
  margin-top: 200px;
  color: rgb(0 0 0 / 32%);
  text-align: center;
}

:deep(.px-popper.is-dark) {
  max-width: 400px;

  .px-popper__arrow::before {
    max-width: 400px;
  }
}

.px-popper.is-dark,
.px-popper.is-dark .px-popper__arrow::before {
  max-width: 500px;
}
</style>
